<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="back-icon" @click="goBack">
				<text class="iconfont">←</text>
			</view>
			<view class="title">扬子晚报微信自助登报</view>
			<view class="website">read.yangtse.com</view>
			<view class="more-icon">
				<text class="iconfont">...</text>
			</view>
		</view>
		
		<!-- 蓝色标题栏 -->
		<view class="blue-header">
			<text class="blue-title">微信自助登报</text>
		</view>
		
		<!-- 步骤导航 -->
		<view class="step-nav">
			<view class="step">
				<text class="step-num">1</text>
				<text class="step-text">选择分类</text>
			</view>
			<view class="step-line"></view>
			<view class="step">
				<text class="step-num">2</text>
				<text class="step-text">信息填写</text>
			</view>
			<view class="step-line"></view>
			<view class="step active">
				<text class="step-num">3</text>
				<text class="step-text">确认支付</text>
			</view>
		</view>
		
		<!-- 支付内容 -->
		<view class="payment-container">
			<view class="payment-card">
				<view class="payment-header">
					<text class="payment-title">订单确认</text>
				</view>
				
				<view class="payment-info">
					<view class="info-item">
						<text class="info-label">订单编号：</text>
						<text class="info-value">{{orderId || orderNumber}}</text>
					</view>
					<view class="info-item">
						<text class="info-label">创建时间：</text>
						<text class="info-value">{{createTime}}</text>
					</view>
					<view class="info-item">
						<text class="info-label">支付金额：</text>
						<text class="info-value price">¥ {{price}}</text>
					</view>
					<view class="info-item">
						<text class="info-label">开具发票：</text>
						<text class="info-value">{{needInvoice ? '是' : '否'}}</text>
					</view>
				</view>
				
				<view class="payment-divider"></view>
				
				<view class="payment-methods">
					<text class="methods-title">选择支付方式</text>
					
					<view class="method-item" :class="{ active: paymentMethod === 'wechat' }" @click="selectPaymentMethod('wechat')">
						<view class="method-icon wechat-icon">
							<text class="icon-text">微</text>
						</view>
						<view class="method-info">
							<text class="method-name">微信支付</text>
							<text class="method-desc">推荐使用微信支付</text>
						</view>
						<view class="method-check" v-if="paymentMethod === 'wechat'">
							<text class="check-icon">✓</text>
						</view>
					</view>
					
					<view class="method-item" :class="{ active: paymentMethod === 'alipay' }" @click="selectPaymentMethod('alipay')">
						<view class="method-icon alipay-icon">
							<text class="icon-text">支</text>
						</view>
						<view class="method-info">
							<text class="method-name">支付宝支付</text>
							<text class="method-desc">使用支付宝扫码支付</text>
						</view>
						<view class="method-check" v-if="paymentMethod === 'alipay'">
							<text class="check-icon">✓</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 支付按钮 -->
			<view class="pay-btn" @click="confirmPayment">
				<text>确认支付</text>
				<text class="pay-amount">¥ {{price}}</text>
			</view>
			
			<!-- 支付说明 -->
			<view class="payment-notice">
				<text>点击"确认支付"即表示您同意</text>
				<text class="notice-link">《扬子晚报自助登报服务协议》</text>
			</view>
		</view>
		
		<!-- 底部版权信息 -->
		<view class="footer">
			<view class="footer-contact" @click="callCustomerService">
				<text>客服电话：</text>
				<text class="contact-phone">13776769686</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				price: 0,
				orderNumber: '',
				orderId: '', // 云数据库中的订单ID
				createTime: '',
				paymentMethod: 'wechat',
				needInvoice: false
			}
		},
		onLoad(options) {
			// 获取传递过来的价格信息
			if (options.price) {
				this.price = options.price;
			}
			
			// 获取是否需要发票的信息
			if (options.needInvoice) {
				this.needInvoice = options.needInvoice === 'true';
			}
			
			// 获取订单ID
			if (options.orderId) {
				this.orderId = options.orderId;
			}
			
			// 生成订单编号
			this.orderNumber = 'YZ' + new Date().getTime();
			
			// 设置创建时间
			const now = new Date();
			const year = now.getFullYear();
			const month = String(now.getMonth() + 1).padStart(2, '0');
			const day = String(now.getDate()).padStart(2, '0');
			const hours = String(now.getHours()).padStart(2, '0');
			const minutes = String(now.getMinutes()).padStart(2, '0');
			this.createTime = `${year}-${month}-${day} ${hours}:${minutes}`;
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			selectPaymentMethod(method) {
				this.paymentMethod = method;
			},
			confirmPayment() {
				// 模拟支付过程
				uni.showLoading({
					title: '支付处理中...'
				});
				
				// 如果有订单ID，则更新订单状态
				if (this.orderId) {
					console.log('准备更新订单状态，订单ID：', this.orderId);
					// 调用云函数更新订单状态
					uniCloud.callFunction({
						name: 'updateAdStatus',
						data: {
							id: this.orderId,
							status: 'processing', // 更新为处理中状态
							paymentMethod: this.paymentMethod
						}
					}).then(res => {
						console.log('更新订单状态成功，返回结果：', res);
						uni.hideLoading();
						
						// 显示支付成功提示
						uni.showModal({
							title: '支付成功',
							content: '您的登报信息已提交，请等待审核',
							showCancel: false,
							success: (res) => {
								if (res.confirm) {
									// 支付成功后返回首页
									uni.reLaunch({
										url: '/pages/index/index'
									});
								}
							}
						});
					}).catch(err => {
						console.error('更新订单状态失败：', err);
						uni.hideLoading();
						uni.showToast({
							title: '支付失败：' + (err.message || '未知错误'),
							icon: 'none'
						});
					});
				} else {
					console.log('没有订单ID，直接模拟支付成功');
					// 没有订单ID，直接模拟支付成功
					setTimeout(() => {
						uni.hideLoading();
						
						// 显示支付成功提示
						uni.showModal({
							title: '支付成功',
							content: '您的登报信息已提交，请等待审核',
							showCancel: false,
							success: (res) => {
								if (res.confirm) {
									// 支付成功后返回首页
									uni.reLaunch({
										url: '/pages/index/index'
									});
								}
							}
						});
					}, 2000);
				}
			},
			callCustomerService() {
				uni.makePhoneCall({
					phoneNumber: '13776769686',
					success: () => {
						console.log('拨打电话成功');
					},
					fail: (err) => {
						console.log('拨打电话失败', err);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: #f8f8f8;
	padding-bottom: 40rpx;
}

.header {
	background: linear-gradient(135deg, #2ecc71, #27ae60);
	color: #fff;
	padding: 40rpx 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	
	.title {
		font-size: 36rpx;
		font-weight: 500;
		text-align: center;
		flex: 1;
	}
	
	.website {
		font-size: 24rpx;
		opacity: 0.8;
		position: absolute;
		bottom: 10rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.back-icon {
		font-size: 40rpx;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 30rpx;
		
		&:active {
			opacity: 0.8;
			background-color: rgba(255, 255, 255, 0.3);
		}
	}
}

.blue-header {
	background: #fff;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	
	.blue-title {
		color: #2ecc71;
		font-size: 32rpx;
		font-weight: bold;
	}
}

.step-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx 40rpx;
	background: #fff;
	margin-bottom: 20rpx;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	
	.step {
		display: flex;
		flex-direction: column;
		align-items: center;
		
		&.active {
			.step-num {
				background: #2ecc71;
				color: #fff;
			}
			.step-text {
				color: #2ecc71;
			}
		}
		
		.step-num {
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			background: #eee;
			color: #999;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
			margin-bottom: 10rpx;
		}
		
		.step-text {
			font-size: 24rpx;
			color: #666;
		}
	}
	
	.step-line {
		flex: 1;
		height: 2rpx;
		background: #eee;
		margin: 0 20rpx;
		margin-bottom: 30rpx;
	}
}

.payment-container {
	padding: 0 20rpx;
}

.payment-card {
	background: #fff;
	border-radius: 12rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 2px 8px rgba(0,0,0,0.05);
	overflow: hidden;
	
	.payment-header {
		padding: 30rpx;
		border-bottom: 1px solid #f5f5f5;
		
		.payment-title {
			font-size: 32rpx;
			color: #333;
			font-weight: 500;
		}
	}
	
	.payment-info {
		padding: 30rpx;
		
		.info-item {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.info-label {
				font-size: 28rpx;
				color: #999;
				width: 160rpx;
			}
			
			.info-value {
				font-size: 28rpx;
				color: #333;
				flex: 1;
				
				&.price {
					color: #ff4d4f;
					font-size: 32rpx;
					font-weight: 500;
				}
			}
		}
	}
	
	.payment-divider {
		height: 20rpx;
		background: #f8f8f8;
	}
	
	.payment-methods {
		padding: 30rpx;
		
		.methods-title {
			font-size: 32rpx;
			color: #333;
			font-weight: 500;
			margin-bottom: 30rpx;
			display: block;
		}
		
		.method-item {
			display: flex;
			align-items: center;
			padding: 30rpx;
			background: #f9f9f9;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
			transition: all 0.3s;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			&.active {
				background: #eafaf1;
				border: 1px solid #2ecc71;
			}
			
			.method-icon {
				width: 80rpx;
				height: 80rpx;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 20rpx;
				
				&.wechat-icon {
					background: #07c160;
				}
				
				&.alipay-icon {
					background: #1677ff;
				}
				
				.icon-text {
					color: #fff;
					font-size: 36rpx;
					font-weight: bold;
				}
			}
			
			.method-info {
				flex: 1;
				
				.method-name {
					font-size: 30rpx;
					color: #333;
					font-weight: 500;
					margin-bottom: 8rpx;
					display: block;
				}
				
				.method-desc {
					font-size: 24rpx;
					color: #999;
				}
			}
			
			.method-check {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				background: #2ecc71;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.check-icon {
					color: #fff;
					font-size: 24rpx;
				}
			}
		}
	}
}

.pay-btn {
	margin: 40rpx 30rpx;
	height: 88rpx;
	background: linear-gradient(135deg, #2ecc71, #27ae60);
	border-radius: 44rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 32rpx;
	font-weight: 500;
	box-shadow: 0 4px 8px rgba(46,204,113,0.2);
	
	.pay-amount {
		margin-left: 20rpx;
		font-size: 36rpx;
	}
	
	&:active {
		opacity: 0.9;
	}
}

.payment-notice {
	text-align: center;
	font-size: 24rpx;
	color: #999;
	margin-top: 30rpx;
	
	.notice-link {
		color: #2ecc71;
		margin-left: 4rpx;
	}
}

.footer {
	margin-top: 60rpx;
	padding: 30rpx;
	text-align: center;
	
	.footer-contact {
		font-size: 28rpx;
		color: #666;
		
		.contact-phone {
			color: #2ecc71;
			font-weight: 500;
		}
	}
}
</style> 